<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打开表单</el-button>
 
    <el-dialog title="添加" :visible.sync="dialogVisible"  width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名字">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="目录类型">
          <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {

  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '大目录'
        }, {
          value: '选项2',
          label: '小目录'
        }
      ],
      value: '',
      dialogVisible: false,
      form: {
        name: '',
        email: ''
      }
    };
  },methods: {
    submitForm() {
      // 这里可以添加表单验证和提交逻辑
      this.dialogVisible = false;
      console.log('表单数据:', this.form);
    }
  }
};
</script>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #30363b;
    margin-left: 20px;
  }
  .el-icon-arrow-down {
    font-size: 14px;
    text-align: center;
  }
</style>
